<!-- Created by mhy on 2018/6/27.

 -->
<template>
  <div class="frame-index">
    <div class="frame-content">

      <div class="frame-left">
        <div class="f-title">
          {{detailMatcard.name}}
          <div @click="$router.back()">&lt;-</div>
        </div>
        <div class="d-slide">目前已经使用21个卡纸，你还可使用3个。</div>

        <div class="d-line"></div>

        <button class="d-btn d-green-btn" @click="useFu">马上使用</button>
        <!--<button class="d-btn d-white-btn">免费试用3天</button>-->

        <!--<div class="d-text-block">试用时，仅管理员可见，微代理员不可见。 马上使用，您的微代理员和用户均可见</div>-->
      </div>

      <div class="frame-right">
        <div class="c-head">
          <div class="username">{{detailMatcard.name}}</div>
        </div>
        <div class="c-body">

          <div class="c-item"  v-if="detailMatcard.shoprelate">
            <div class="c-text green">使用中状态</div>
          </div>

          <!--<div class="c-item">-->
          <!--<div class="c-text red">使用中状态</div>-->
          <!--</div>-->

          <x-item :label="'卡纸ID号：' + detailMatcard.id" text="共0个我的客户使用0次"></x-item>

          <div class="c-item-block">
            <div class="c-block-center" :style="{backgroundColor: info != null ? info.customcolor : 'white'}">
              <img :src="info.imgurl" class="c-item-img-1" >

              <!--<img :src="info.czjmt" class="c-item-img-2">-->
              <!--<img :src="info.sa" class="c-item-img-3">-->
            </div>
          </div>

          <x-item label="名称" :text="detailMatcard.name"></x-item>
          <!--<x-item label="自定义名称" text="修改" green @click.native="change"></x-item>-->
          <!--<x-item label="宽（cm）" :text="info.width"></x-item>-->
          <x-item label="厚（cm）" :text="info.height"></x-item>
          <x-item label="卡纸色值" :text="info.customcolor"></x-item>
          <!--<x-item label="内凹（cm）" :text="info.inout"></x-item>-->
          <!--<x-item label="背凹（cm）" text="暂无背凹设计"></x-item>-->

          <div class="regist-message">
            <div>所属厂家信息</div>
          </div>
          <x-item :label="detailMatcard.factoryname" :text="detailMatcard.factory"></x-item>
          <x-item label="暂无种类" :text="detailMatcard.seqnumber"></x-item>

          <!--<div class="d-img-block" style="margin-bottom:228px;">-->
            <!--<div class="d-img-label">效果图</div>-->
            <!--<img :src="info.xgt" alt="">-->
          <!--</div>-->
        </div>
      </div>
    </div>
    <yd-popup v-model="show" position="center" :close-on-masker="false">
      <div class="p-wrap">
        <div class="p-title">修改名称</div>
        <input type="text" class="p-input" v-model="content">
        <div class="p-btn-box">
          <yd-button type="hollow" class="cancel-btn" @click.native="show = false">取消</yd-button>
          <yd-button type="primary" class="confirm-btn" @click.native="confirm">确定</yd-button>
        </div>
      </div>
    </yd-popup>
  </div>
</template>

<script>

  import {mapActions,mapState} from 'vuex'
  export default {
    data() {
      return {
        content: '',
        show: false
      }
    },
    components:{

    },
    methods: {
      ...mapActions([
        'getMatcardDetail',
        'updateMaterial',

      ]),
      useFu () {
        this.$xalert.open({
          title: '确定要使用卡纸“' + this.detailMatcard.name  + '”吗？',
          btnText: '确定',
          btnColor: '#FF523E',
          success: () => {
            this.$xalert.close()
            let params = {
              action: 'update',
              mtype: localStorage.getItem('setm'),
              subaction:'add',
              mid:this.detailMatcard.id,
              userid: localStorage.getItem('userid'),
              subid: localStorage.getItem('userid'),
              mstate: 'disable'
            }
            this.updateMaterial(params)
              .then(data => {
                this.$dialog.toast({
                  mes: '添加使用成功',
                  timeout: 1500,
                  icon: 'success',
                  callback: () => {

                  }
                });
              })

          }
        })
      },
      change () {
        this.show = true
      },
      confirm () {
        this.show = false
      }
    },
    computed: {
      ...mapState({
        detailMatcard: state => state.material.detailMatcard
      }),
      info () {
        try{
          let info =  JSON.parse(this.detailMatcard.info)
          return info
        }catch (e){
          return {}
        }
      }
    },
    mounted (){
      let params = {action: "get", id: this.$route.query.id}
      this.getMatcardDetail(params)
    }
  }
</script>

<style scoped lang="scss">
  @import './material.scss';
  @import './index.scss';

  .p-wrap{
    position: relative;
    background: #fff;
    border-radius: 6px;
    width: 360px; height: 240px;
  }

  .p-title{
    width: 100%; height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
  }

  .p-input{
    display: block;
    margin: 40px auto;
    width: 80%; height: 40px;
    outline: none;
    border: 1px solid #eaeaea;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 4px;
  }

  .p-btn-box{
    position: absolute;
    width: 100%;
    height: 100px;
    left: 0; bottom: 0;
  &>.cancel-btn{
      width: 80px; height: 40px;
      position: absolute;
      left: 60px; top: 50%;
      transform: translateY(-50%);
      font-size: 15px;
    }
  &>.confirm-btn{
      width: 80px; height: 40px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 60px;
      font-size: 15px;
    }
  }
</style>
